<template>
	<view>
		<!-- <view style="margin-left: 223rpx;margin-top: 20rpx;">
			<uploader />
		</view> -->
		<view class="install-container" style="margin-bottom: 30rpx;">

			<!-- 用户信息 -->
			<!-- 如果需要使用 validateFunction 自定义校验规则,则不能采用 uni-forms 的 rules 属性来配置校验规则，
			这时候需要通过ref，在onReady生命周期调用组件的setRules方法绑定验证规则 -->
			<uni-forms :value="params['高层住宅小区']" ref="form" validateTrigger="bind" class="word5">
				<uni-forms-item required label="照片上传" name="照片上传">
					<uploader :max="1" v-model="params['高层住宅小区']['照片上传']" />
				</uni-forms-item>
				<uni-forms-item required label="检查点名称：" name="小区名称">
					<input :disabled="isNoEdit" maxlength="50" placeholder="请输入小区名称" v-model="params['高层住宅小区']['小区名称']" @input="binddata('小区名称',$event.detail.value)">
				</uni-forms-item>
				<uni-forms-item required label="检查点地址：" name="地址">
					<choose-address :disabled="isNoEdit" @location="getLocation" placeholder="请输入小区地址" v-model="params['高层住宅小区']['地址']" @input="binddata('地址',$event)"></choose-address>
				</uni-forms-item>
				<uni-forms-item required label="物业名称：" name="物业名称">
					<input :disabled="isNoEdit" maxlength="18" v-model="params['高层住宅小区']['物业名称']" placeholder="请输入物业名称" @input="binddata('物业名称',$event.detail.value)">
				</uni-forms-item>
				<uni-forms-item required label="负责人：" name="负责人">
					<input :disabled="isNoEdit" maxlength="18" v-model="params['高层住宅小区']['负责人']" placeholder="请输入负责人姓名" @input="binddata('负责人',$event.detail.value)">
				</uni-forms-item>
				<uni-forms-item required name="联系电话" label="联系电话：">
					<input :disabled="isNoEdit" maxlength="18" v-model="params['高层住宅小区']['联系电话']" placeholder="请输入负责人联系电话" @input="binddata('联系电话',$event.detail.value)">
				</uni-forms-item>
				<uni-forms-item required name="竣工时间" label="小区竣工时间：">
					<date-picker :disabled="isNoEdit" placeHolder="请填写小区竣工时间" v-model="params['高层住宅小区']['竣工时间']" @input="binddata('竣工时间',$event)"></date-picker>
				</uni-forms-item>
				<uni-forms-item required name="消防重点关注对象" label="消防重点对象：">
					<uni-data-checkbox v-model="params['高层住宅小区']['消防重点关注对象']" :localdata="status"></uni-data-checkbox>
				</uni-forms-item>
				<uni-forms-item>
					<facility-info :hydrantList="hydrantList" 
					:annihilatorList="annihilatorList"
					:smokeList="smokeList"
					:gasTankList="gasTankList" 
					:temperateList="temperateList"
					:hydrantLength="hydrantLength"
					:annihilatorLength="annihilatorLength"
					:smokeLength="smokeLength"
					:gasTankLength="gasTankLength" 
					:temperateLength="temperateLength"
					:isShowAdd="!isNoEdit"
					:isShowDelete="!isNoEdit"
					@more="goMoreInstall" @edit="goEdit" @delete="onDelete"  @add="goAddInstall"></facility-info>
				</uni-forms-item>
				<uni-forms-item v-if="personType !== 1">
					<partition-info @edit="goEditPartition" @delete="goDelete" :partition-list="partitionList" @add="goAddPartition" @show="dialogVisible = true"></partition-info>
				</uni-forms-item>
				<uni-forms-item v-if="personType !== 1">
					<building-info @more="goMoreBuild" @add="goAddBuild" @edit="goEditBuild" @delete="goDeleteBuild" :build-list="buildList"></building-info>
				</uni-forms-item>
				<uni-forms-item v-if="personType !== 1">
					<unit-info @more="goMoreUnit" @add="goAddUnit" @edit="goEditUnit" @delete="goDeleteUnit" :unit-list="unitList"></unit-info>
				</uni-forms-item>
				<uni-forms-item v-if="personType !== 1">
					<floor-info @more="goMoreFloor" @add="goAddFloor" @edit="goEditFloor" @delete="goDeleteFloor" :floor-list="floorList" @show="floorVisible = true"></floor-info>
				</uni-forms-item>
				<button class="grid-btn" @click="submitForm">提交</button>
			</uni-forms>
		</view>
		<view>{{personType}}</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	import uploader from '../myComponents/image-uploader.vue'
	import DatePicker from '../myComponents/date-picker.vue'
	import LbPicker from '../components/lb-picker/index.vue'
	import FacilityInfo from '../components/facilityInfo.vue'
	import ResidentInfo from '../components/residentInfo.vue'
	import ChooseAddress from '../myComponents/chooseAddress.vue'
	import dayjs from 'dayjs'
	import PartitionInfo from '../components/partitionInfo.vue'
	import UnitInfo from '../components/unitInfo.vue'
	import BuildingInfo from '../components/buildingInfo.vue'
	import FloorInfo from '../components/floorInfo.vue'
	import comboxSearch from "../components/cuihai-combox/cuihai-combox.vue"
	export default {
		components: {
			uploader,
			DatePicker,
			LbPicker,
			ResidentInfo,
			ChooseAddress,
			FacilityInfo,
			PartitionInfo,
			UnitInfo,
			BuildingInfo,
			FloorInfo,
			comboxSearch
		},
		data() {
			return {
				isNoEdit: false,
				hydrantList: [],
				hydrantLength: 0,
				annihilatorList: [],
				annihilatorLength: 0,
				smokeList: [],
				smokeLength: 0,
				temperateList: [],
				temperateLength: 0,
				gasTankList: [],
				gasTankLength: 0,
				isDisabled: true,
				keyName: '分区名称',
				keyName1: '楼栋号',
				keyName2: '单元号',
				editVisible: false,
				dialogVisible: false,
				buildVisible: false,
				unitVisible: false,
				floorVisible: false,
				unitEditVisible: false,
				floorEditVisible: false,
				label: '请选择证件类型',
				installTypeList: this.$type.installTypeList,
				params: {
					所属网格id: null,
					lagitude: null,
					longitude: null,
					检查点类型: 'residential',
					高层住宅小区: {
						小区id: null,
						小区名称: null,
						物业名称: null,
						联系电话: null,
						地址: '',
						负责人: null,
						竣工时间: null,
						消防重点关注对象: null,
						备注: null,
						照片上传: null
					}
				},
				params1: {
					检查点id: null
				},
				params2: {
					网格id: null,
					检查点id: null,
					pagination: {
						current: 1,
						pageSize: 5
					},
					sorter: {
						field: "id",
						order: 0
					}
				},
				installList: [],
				partitionList: [],
				unitList: [],
				buildList: [],
				floorList: [],
				buildToUnitList: [],
				status: [{
						text: '是',
						value: true
					},
					{
						text: '否',
						value: false
					}
				],
				//表单验证规则
				rules: {
					小区名称: {
						rules: [{
							required: true,
							errorMessage: '请输入小区名称',
						}]
					},
					物业名称: {
						rules: [{
							required: true,
							errorMessage: '请输入物业名称',
						}]
					},
					负责人: {
						rules: [{
							required: true,
							errorMessage: '请输入负责人姓名',
						}, ]
					},
					联系电话: {
						rules: [{
							required: true,
							errorMessage: '请输入联系电话',
						}, ]
					},
					地址: {
						rules: [{
							required: true,
							errorMessage: '请输入检查点地址'
						}]
					},
					竣工时间: {
						rules: [{
							required: true,
							errorMessage: '请输入竣工时间'
						}]
					},
					证件类型: {
						rules: [{
							required: true,
							errorMessage: '请选择证件类型'
						}]
					},
					证件编码: {
						rules: [{
							required: true,
							errorMessage: '请输入证件编码'
						}]
					},
					消防重点关注对象: {
						rules: [{
							required: true,
							errorMessage: '请选择是否是消防重点对象',
						}]
						// rules: [{
						// 	required: true,
						// 	errorMessage: '请输入检查地点',
						// }, {
						// 	//字符串格式，反斜杠要转义\\  开头结尾/ /省略  new RegExp("\\w+") 相当于  /\w+/
						// 	pattern: '^[1-9]\\d{5}(18|19|20)\\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\\d{3}[0-9Xx]$',
						// 	errorMessage: '身份证号码格式不正确',
						// }]
					}
				}
			}
		},
		onReady() {
			// 需要在onReady中设置规则
			this.$refs.form.setRules(this.rules)
		},
		computed: {
			...mapState(['personType'])
		},
		created() {
			this.params.所属网格id = uni.getStorageSync('gridInfo').所属网格id
		},
		onLoad(options) {
			this.params.id = +options.id
			this.params1.检查点id = +options.id
			this.params2.检查点id = +options.id
			this.params2.网格id = uni.getStorageSync('gridInfo').所属网格id
			this.getCheckPointInfo()
			// this.getInstallList()
			// this.getPartitionList()
			// this.getBuildList()
			// this.getUnitList()
			// this.getFloorList()
		},
		onShow() {
			// this.getCheckPointInfo()
			this.getInstallList()
			this.getPartitionList()
			this.getBuildList()
			this.getUnitList()
			this.getFloorList()
		},
		methods: {
			goAddFloor() {
				uni.navigateTo({
					url: '../addFloor/addFloor?id=' + this.params.id
				})
			},
			goEditFloor(item) {
				uni.navigateTo({
					url: '../floorDetail/floorDetail?item=' + JSON.stringify(item) + '&id=' + this.params.id + '&name=' + this.params.高层住宅小区.小区名称
				})
			},
			goAddUnit() {
				uni.navigateTo({
					url: '../addUnit/addUnit?id=' + this.params.id
				})
			},
			goEditUnit(item) {
				uni.navigateTo({
					url: '../unitDetail/unitDetail?item=' + JSON.stringify(item) + '&id=' + this.params.id + '&name=' + this.params.高层住宅小区.小区名称
				})
			},
			goAddBuild() {
				uni.navigateTo({
					url: '../addBuild/addBuild?id=' + this.params.id
				})
			},
			goEditBuild(item) {
				uni.navigateTo({
					url: '../buildDetail/buildDetail?item=' + JSON.stringify(item) + '&id=' + this.params.id + '&name=' + this.params.高层住宅小区.小区名称
				})
			},
			goEditPartition(item) {
				uni.navigateTo({
					url: '../partitionDetail/partitionDetail?item=' + JSON.stringify(item) + '&id=' + this.params.id + '&name=' + this.params.高层住宅小区.小区名称
				})
			},
			goAddPartition() {
				uni.navigateTo({
					url: '../addPartition/addPartition?id=' + this.params.id
				})
			},
			// 楼层
			getFloorList() {
				this.$http.post('gridSystem/floor/list', this.params2).then(res => {
					console.log(res, '楼层')
					if (res.code === 10000) {
						if(res.data.list !== null) {
							this.$common.transformFloor(res.data.list)
						}
						this.floorList = res.data.list
					}
				})
			},
			goDeleteFloor(id) {
				this.$common.showModal('确定要删除该楼层吗?', this.deleteFloor, id)
			},
			deleteFloor(id) {
				this.$http.post('gridSystem/floor/delete', {
					楼层id: id
				}).then(res => {
					if (res.code === 10000) {
						uni.showToast({
							title: '删除成功'
						})
						this.getFloorList()
					}else if(res.code === 50012) {
						uni.showToast({
							title: '删除失败,楼层下存在房屋',
							icon: 'none'
						})
					}
				})
			},
			// 单元
			getUnitList() {
				this.$http.post('gridSystem/unit/list', this.params2).then(res => {
					console.log(res)
					if (res.code === 10000) {
						if(res.data.list !== null) {
							this.$common.transformUnit(res.data.list)
						}
						this.unitList = res.data.list
					}
				})
			},
			goDeleteUnit(id) {
				this.$common.showModal('确定要删除该单元吗?', this.deleteUnit, id)
			},
			deleteUnit(id) {
				this.$http.post('gridSystem/unit/delete', {
					单元id: id
				}).then(res => {
					if (res.code === 10000) {
						uni.showToast({
							title: '删除成功'
						})
						this.getUnitList()
					}else if(res.code === 50012) {
						uni.showToast({
							title: '删除失败,单元下存在楼层',
							icon: 'none'
						})
					}
				})
			},
			getBuildList() {
				this.$http.post('gridSystem/building/list', this.params2).then(res => {
					console.log(res, '楼栋')
					if (res.code === 10000) {
						if(res.data.list !== null) {
							this.$common.transformBuild(res.data.list)
						}
						this.buildList = res.data.list
					}
				})
			},
			goDeleteBuild(id) {
				this.$common.showModal('确定要删除该楼栋吗?', this.deleteBuild, id)
			},
			deleteBuild(id) {
				this.$http.post('gridSystem/building/delete', {
					楼栋id: id
				}).then(res => {
					if (res.code === 10000) {
						uni.showToast({
							title: '删除成功'
						})
						this.getBuildList()
					}else if(res.code === 50012) {
						uni.showToast({
							title: '删除失败,楼栋下存在单元',
							icon: 'none'
						})
					}
				})
			},
			goDelete(id) {
				this.$common.showModal('确定要删除该分区吗?', this.deletePartition, id)
			},
			deletePartition(id) {
				this.$http.post('gridSystem/partition/delete', {
					分区id: id
				}).then(res => {
					if (res.code === 10000) {
						uni.showToast({
							title: '删除成功'
						})
						this.getPartitionList()
					}else if(res.code === 50012) {
						uni.showToast({
							title: '删除失败,分区下存在楼栋',
							icon: 'none'
						})
					}
				})
			},
			goMoreInstall() {
				if(this.personType == 1 && this.params.高层住宅小区.联系电话 !== uni.getStorageSync('gridInfo').联系电话) {
					uni.navigateTo({
						url: '../installationList/installationList?id=' + this.params.id + '&name=' + this.params.高层住宅小区.小区名称 + '&hidden=' + true
					})
					return
				}
				uni.navigateTo({
					url: '../installationList/installationList?id=' + this.params.id + '&name=' + this.params.高层住宅小区.小区名称
				})
			},
			goMoreBuild() {
				uni.navigateTo({
					url: '../allBuild/allBuild?id=' + this.params.id
				})
			},
			goMoreUnit() {
				uni.navigateTo({
					url: '../allUnit/allUnit?id=' + this.params.id
				})
			},
			goMoreFloor() {
				uni.navigateTo({
					url: '../allFloor/allFloor?id=' + this.params.id
				})
			},
			goEdit(id) {
				uni.navigateTo({
					url: '../installtionDetail/installtionDetail?id=' + id
				})
			},
			onDelete(id) {
				this.$common.showModal('确定要删除该设施吗?', this.deleteInstall, [id])
			},
			deleteInstall(id) {
				this.$http.post('gridSystem/device/delete', {
					id
				}).then(res => {
					if (res.code === 10000) {
						uni.showToast({
							title: '删除成功'
						})
						this.getInstallList()
					}
				})
			},
			// 获取设施列表
			getInstallList() {
				this.$http.post('gridSystem/device/listWithoutAuth', this.params1).then(res => {
					console.log(res)
					if(res.code === 10000){
						this.installList = res.data.list
						if(res.data.list !== null) {
							this.hydrantList = res.data.list.filter(item => item.设施类型 === 'hydrant').slice(0,2)
							this.annihilatorList = res.data.list.filter(item => item.设施类型 === 'annihilator').slice(0,2)
							this.smokeList = res.data.list.filter(item => item.设施类型 === 'smokeDetector').slice(0,2)
							this.temperateList = res.data.list.filter(item => item.设施类型 === 'temperatureDetector').slice(0,2)
							this.gasTankList = res.data.list.filter(item => item.设施类型 === 'gasTank').slice(0,2)
							this.hydrantLength = res.data.list.filter(item => item.设施类型 === 'hydrant').length
							this.annihilatorLength = res.data.list.filter(item => item.设施类型 === 'annihilator').length
							this.smokeLength = res.data.list.filter(item => item.设施类型 === 'smokeDetector').length
							this.temperateLength = res.data.list.filter(item => item.设施类型 === 'temperatureDetector').length
							this.gasTankLength = res.data.list.filter(item => item.设施类型 === 'gasTank').length
						    return 
						}
							this.hydrantList = []
							this.annihilatorList = []
							this.smokeList = []
							this.temperateList = []
							this.gasTankList = []
							this.hydrantLength = 0
							this.annihilatorLength = 0
							this.smokeLength = 0
							this.temperateLength = 0
							this.gasTankLength = 0
					}
				})
			},
			goAddInstall() {
				uni.navigateTo({
					url: '../createInstallation/createInstallation?id=' + this.params.id + '&name=' + this.params.高层住宅小区.小区名称
				})
			},
			// 获取检查点详情
			getCheckPointInfo() {
				uni.showLoading({
					mask: true
				})
				this.$http.post('gridSystem/checkPoint/info', this.params).then(res => {
					console.log(res)
					if (res.code === 10000) {
						if(this.personType == 1 && res.data.高层住宅小区.联系电话 !== uni.getStorageSync('gridInfo').手机号) {
							this.isNoEdit = true
							console.log(this.isNoEdit)
						}
						if(this.personType === 1) {
							this.status.forEach(item => {
								if(item.value !== res.data.高层住宅小区.消防重点关注对象){
									item.disable = true
								}
							})
						}
						this.params = res.data
						this.params.高层住宅小区.竣工时间 = dayjs(this.params.高层住宅小区.竣工时间).format('YYYY-MM-DD')
					}
				})
			},
			// 获取分区列表
			getPartitionList() {
				this.$http.post('gridSystem/partition/list', this.params2).then(res => {
					console.log(res,'分区')
					if (res.code === 10000) {
						if(res.data.list !== null) {
							res.data.list.forEach(item => {
								if(!item.分区名称.includes('区')) {
									item.分区名称 = item.分区名称 + '区'
								}
							})
						}
						this.partitionList = res.data.list
					}
				})
			},
			getLocation(event) {
				console.log(event.address)
				this.params.lagitude = event.latitude
				this.params.longitude = event.longitude
				this.params.高层住宅小区.地址 = event.address
				// console.log(this.params)
			},
			handleTap(name) {
				this.$refs[name].show()
			},
			handleConfirm(e) {
				if (e) {
					const name = e.dataset.name
					const label = e.item.label
					console.log(this.value1, '值')
					// this.params4.education = e.item.id
					if (name && label) {
						this[name] = label
					}
				}
			},
			submitForm(form) {
				/// console.log('this.resident', this.resident)
				// 手动提交表单
				this.$refs.form.submit().then(res => {
					console.log(this.params)
					console.log('表单数据信息：', res);
					this.params.高层住宅小区.竣工时间 = dayjs(this.params.高层住宅小区.竣工时间).format('YYYY-MM-DDTHH:mm:ssZ')
					// this.$emit('submit', this.params)
					this.editCheckPoint(this.params)
					// this.$emit('submit', Object.assign({},this.params,{高层住宅小区: res}))
				}).catch(err => {
					console.log('表单错误信息：', err);
					uni.showToast({
						icon: 'none',
						title: "表单字段填写错误，请检查"
					})
				})
			},
			editCheckPoint(params) {
				uni.showLoading({
					mask: true
				})
				this.$http.post('gridSystem/checkPoint/update', params).then(res => {
					console.log(res)
					if (res.code === 10000) {
						uni.showToast({
							title: '修改成功'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.install-container {
		padding-bottom: 90rpx;
	}

	.modal-container {
		.dialog {
			position: fixed;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			right: 0;
			background: #282828;
			opacity: 0.53;
		}

		.toast {
			position: fixed;
			padding-left: 30rpx;
			padding-top: 120rpx;
			top: 262rpx;
			left: 50%;
			transform: translate(-50%);
			width: 640rpx;
			height: 458rpx;
			background: #FFFFFF;
			border-radius: 12rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.close-icon {
				width: 40rpx;
				height: 40rpx;
				border-radius: 50%;
				text-align: center;
				line-height: 40rpx;
				font-size: 24rpx;
				color: #fff;
				position: absolute;
				right: 15rpx;
				top: 10rpx;
				background: #E8E8E8;
			}

			.input-item {
				display: flex;
				margin-bottom: 50rpx;
				align-items: center;
				font-size: 28rpx;

				input {
					border: 2rpx solid #eee;
					height: 60rpx;
					width: 400rpx;
				}

				.required {
					&::before {
						position: absolute;
						left: 50rpx;
						// display: inline-block;
						content: '*';
						color: red;
					}
				}

				.required1 {
					&::before {
						position: absolute;
						left: -20rpx;
						// display: inline-block;
						content: '*';
						color: red;
					}
				}
			}

			.five {
				position: relative;
				left: -13rpx;
			}

			.evaluate-content {
				padding: 10rpx;
				margin-top: 39rpx;
				margin-bottom: 38rpx;
				width: 540rpx;
				height: 192rpx;
				font-size: 28rpx;
				border: 2rpx solid #D2D2D2;
			}

			.evaluate-btn {
				// margin-top: 40rpx;
				margin-left: 220rpx;
				width: 148rpx;
				height: 56rpx;
				line-height: 56rpx;
				background: #3080FB;
				border-radius: 4rpx;
				color: #fff;
				font-size: 26rpx;
				text-align: center;
			}
		}
	}
</style>
